<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta name="layout" content="files">
        <title>火堆</title>       
        <link rel="stylesheet" href="${resource(dir: 'css', file: 'user_auth.css')}" type="text/css">
        <link rel="stylesheet" type="text/css" href="../frozen/css/frozen.css">
    	<link rel="stylesheet" type="text/css" href="../css/default.css">
    	<script type="text/javascript" src="${resource(dir: 'js', file: 'jquery-1.10.2.js')}"></script>
    	<script type="text/javascript" src="${resource(dir: 'js', file: 'ajaxfileupload.js')}"></script>
    	<script type="text/javascript" src="../js/user_auth.js"></script>
    	<link rel="stylesheet" type="text/css" href="../css/user_auth.css">
    	<style>
		    .form-common input.canNotNull ,.form-common textarea.canNotNull {
		      border-color: #E9666B;
		      outline: 0;
		      -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(233, 102, 127, 0.6);
		      box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(233, 102, 137, 0.6);
		  }
		  div.img-box.canNotNull{
		      -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(233, 102, 127, 0.6)!important;
		      box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(233, 102, 137, 0.6);
		      border: 1px solid #E9666B!important;
		  }
		</style>
    </head>
<body>

	<section class="ui-container">
        <ul class="step-navi">
            <li class="active">身份资料</li>
            <li>绑定银行卡</li>
            <li>绑定手机号</li>
            <li>认证完成</li>
        </ul>
        <g:form method="POST" url="[resource:member, action:'userAuthSubmit']" class="form-common2">
            <div class="step step1 show">
				<footer class="ui-footer ui-footer-stable ui-border-t">
                    <div class="ui-footer-btns">
                        <button type="button" class="btn-footer btn-red" onclick="if(checkIdInfo()){goStep(2);}">下一步</button>
                    </div>
                </footer>
                <div class="u-module">
                    <div class="ui-form-item ui-border-tb">
                        <label for="#">真实姓名</label>
                        <input type="text" placeholder="真实姓名" id="realName" value="${member.realName}">
                    </div>
                    <div class="ui-form-item  ui-border-b">
                        <label for="#">身份证号</label>
                        <div class="form-photo-box">
                            <i data-link="#img1" ></i>
                            <input type="text" placeholder="身份证号" id="idNumber" value="${member.idNumber}" onchange="checkIdNumber(this)">
                        </div>
                    </div>
                </div>
                 <p style="font-size:12px;padding:0 15px 0 15px;color:#979797">个人上传身份证，慈善组织上传法人登记证和组织机构代码证</p>
                <ul class="ui-justify">
                    <li>
                        <div class="form-single-img">
                            <p>示例</p>
                            <div class="img-box" style="background-image:url(../images/demo/demo-card-1.jpg)"></div>
                        </div>
                    </li>
                    <li>
                        <div class="form-single-img">
                        	<p>证件一</p>
                            <div class="img-box" id="Idimg" style="background-image:url('/scfire/project/imgRead?img=${member.activeIDNumberPhoto}')">
                                <input type="file" name="img" id="img">
                                <input type="hidden" name="identifyimg" id="identifyimg" value="${member.activeIDNumberPhoto}">
                            </div>
                            <%--
                            <p>上传身份证正面照</p>
                            <div class="img-box plus">
                                <input type="file" id="img1">
                            </div>
                            --%>
                        </div>
                    </li>
                    </ul>
                    <ul class="ui-justify">
                    <li>
                        <div class="form-single-img">
                            <p>示例</p>
                            <div class="img-box" style="background-image:url(../images/demo/demo-card-2.jpg)"></div>
                        </div>
                    </li>
                    <li>
                        <div class="form-single-img">
                        	<p>证件二</p>
                            <div class="img-box" id="Idimgre" style="background-image:url('/scfire/project/imgRead?img=${member.negativeIDNumberPhoto}')">
                                <input type="file" name="imgre" id="imgre" >
                                <input type="hidden" name="identifyimgre" id="identifyimgre" value="${member.negativeIDNumberPhoto}">
                            </div>
                        </div>
                    </li>
                	</ul>
                <div class="u-module">
                    <div class="ui-form-item ui-border-tb">
                        <label for="#">所在机构</label>
                        <input type="text" placeholder="如：上海紫罗兰小学语文教师" id="school" value="${member.school}">
                    </div>
                    <div class="ui-form-item ui-border-b ui-form-item-textarea">
                        <label for="#">简介描述</label>
                        <textarea class="count"  placeholder="用简洁有趣的文字介绍一下你自己，越清晰的描述越能让更多人信任你。" oninput="checkWords(this, 800)"  id="description">${member.description}</textarea>
                        <div class="form-unit count">${800 - member.description.length()}</div>
                    </div>
                </div>
            </div>

			<div class="step step2">
            <footer class="ui-footer ui-footer-stable ui-border-t">
                    <div class="ui-footer-btns">
                    	<button type="button" class="btn-footer btn-red" onclick="goStep(1);">上一步</button>
                    	<span style="margin-left:1px"></span>
                        <button type="button" class="btn-footer btn-red" onclick="if(checkBankInfo()){goStep(3);}">下一步</button>
                    </div>
                </footer>
            <div class="u-module">
                    <div class="ui-form-item ui-form-item-show ui-form-item-link ui-border-tb">
                        <label for="#">开户行</label>
                        <select name="" id="bankName">
                            <option value="0" disabled>选择开户行</option>
		                    <option value="1">中国工商银行</option>
		                    <option value="2">中国建设银行</option>
		                    <option value="3">中国银行</option>
		                    <option value="4">中国农业银行</option>
		                    <option value="5">交通银行</option>
		                    <option value="6">招商银行</option>
		                    <option value="7">中国邮政储蓄银行</option>
		                    <option value="8">中信银行</option>
		                    <option value="9">光大银行</option>
		                    <option value="10">民生银行</option>
		                    <option value="11">兴业银行</option>
		                    <option value="12">华夏银行</option>
		                    <option value="13">上海浦发银行</option>
		                    <option value="14">深圳发展银行</option>
		                    <option value="15">广东发展银行</option>
		                    <option value="16">上海银行</option>
		                    <option value="17">平安银行</option>
		                    <option value="18">北京银行</option>
		                    <option value="19">南京银行</option>
		                    <option value="20">宁波银行</option>
		                    <option value="21">江苏银行</option>
		                    <option value="22">甘肃银行</option>
		                    <option value="23">农村信用合作社</option>
		                    <option value="24">农村商业银行</option>
                        </select>
                    </div>
                    <div class="ui-form-item  ui-border-b">
                        <label for="#">开户支行</label>
                        <input  type="text" placeholder="例如：江苏省无锡市城北支行" id="subBranch"  value="${member.subBranch}" >
                    </div>

                    <div class="ui-form-item  ui-border-b">
                        <label for="#">银行卡号</label>
                        <input  type="text" placeholder="银行卡号（本人）" id="bankCard"  value="${member.bankCard}"  onchange="checkBankNumber(this)">
                    </div>
                </div>
                
            </div>
            
            <div class="step step3">
            	<footer class="ui-footer ui-footer-stable ui-border-t">
                    <div class="ui-footer-btns">
                    	<button type="button" class="btn-footer btn-red" onclick="goStep(2);">上一步</button>
                    	<span style="margin-left:1px"></span>
                        <button type="button" class="btn-footer btn-red" onclick="submitAuthInfoEx()">提交</button>
                    </div>
                </footer>
                
                <div class="ui-form-item ui-form-item-show ui-border-tb">
                    <label for="#">手机号</label>
                    <input type="text" placeholder="" disabled="disabled" value="${member.mobile}" id="mobile" onchange="checkPhoneNumber(this)">
                </div>
                <input type="checkbox" class="bth-change" data-txt="修改" onclick="changePhoneNum()">
                <div class="ui-form-item ui-border-b">
                    <label for="#">验证码</label>
                    <div class="form-qr-code-box">
                        <input type="text" placeholder="验证码" id="authCode">
                        <button type="button">发送验证码</button>
                    </div>
                </div>
            </div>

            <div class="step step4">
            	<footer class="ui-footer ui-footer-stable ui-border-t">
                    <div class="ui-footer-btns">
                        <button type="button" class="btn-footer btn-red" onclick="window.location.href='/scfire/project/start'">快速至发起项目</button>
                    </div>
                </footer>
                <div class="success-box">
  					<img alt="" class="ui-success-img" src="/scfire/static/images/ic_success.png">
                    <h4>提交成功!</h4>
                   	<p> 您的实名资料正在审核中，</p>
					<p>欢迎您在火堆上多多发起善举。</p>
                </div>
                
                <%--
                <a href="/scfire/project/start" class="ui-btn-lg btn-red btn-next" onclick="goProject()">快速至发起项目</a>
                --%>
            </div>
        </g:form>
    </section>

    <div class="d-warning">
        <div class="txt">
            <h2>审核中</h2>
            <p>您的身份已提交并审核中</p>
        </div>
    </div>


	<script type="text/javascript">
	
	var nextFlag = true;

	var isIdNumVailded = true;
	var isPhoneNumVailded = true;
	var isBankNumberVailded = true;
	var authCodeStats       = true;
	var changePhoneFlag = false;
	
	(function() {
		
		$('.form-common2 .form-single-img #Idimg').on('change', 'input[type=file]', function(){
			 var files = [$('.form-single-img #Idimg input[type=file]').attr('id')]
  			$.ajaxFileUpload({  
     			url:'/scfire/project/imgSaveMb',  
     			secureuri:false,  
     			dataType:'text',
     			fileElementId:files,//file标签的id 
     			success: function (data, status) { 
		           	if(data=='large'){
		           		showWarn('图片过大')
		           		return
		           	}
		       		if(data=='format'){
		           		showWarn('图片格式不对')
		           		return
		           	}
	               //把图片替换  
	               if(data=='fail'){
	               	showWarn('上传失败')
	               }else{
	                	 //图片预览
	                   var imageurl = "/scfire/project/imgRead?img="+data;	       
	                   console.log(imageurl)            
	                   $("#Idimg").css('background-image', 'url(' + imageurl + ')');
	                   //图片地址赋值给后台
	                   $("#identifyimg").val(data);
	                   $("#img").replaceWith('<input type="file" name="img" id="img">');
	                  //alert($("#identifyimg").val());   	                            
	               }
		           },  
		           error: function (data, status, e) {  
		           }
		       	 });
        });

		$('.form-common2 .form-single-img #Idimgre').on('change', 'input[type=file]', function(){
			 var files = [$('.form-single-img #Idimgre input[type=file]').attr('id')]
 			$.ajaxFileUpload({  
    			url:'/scfire/project/imgSaveMb',  
    			secureuri:false,  
    			dataType:'text',
    			fileElementId:files,//file标签的id 
    			success: function (data, status) { 
		           	if(data=='large'){
		           		showWarn('图片过大')
		           		return
		           	}
		       		if(data=='format'){
		           		showWarn('图片格式不对')
		           		return
		           	}
	               //把图片替换  
	               if(data=='fail'){
	               	showWarn('上传失败')
	               }else{
	                	 //图片预览
	                   var imageurl = "/scfire/project/imgRead?img="+data;	                   
	                   $("#Idimgre").css('background-image', 'url(' + imageurl + ')');
	                   //图片地址赋值给后台
	                   $("#identifyimgre").val(data);
	                   $("#imgre").replaceWith('<input type="file" name="imgre" id="imgre">');
	                  //alert($("#identifyimg").val());   	                            
	               }
		           },  
		           error: function (data, status, e) {  
		           }
		       	 });
       });

        $('.form-common2 .form-photo-box > i').click(function(){
            $($(this).attr('data-link')).click();
        });

        var count=$("#bankName option").length;

        for(var i=0;i<count;i++)  
        {           
            if($("#bankName").get(0).options[i].text == '${member.bankName}')  
            {  
                $("#bankName").get(0).options[i].selected = true;  
                break;  
            }  
        }
        
        $('.form-common2 .form-qr-code-box button').click(function(){
            
        	//发送短信
            var mobile = $('#mobile').val();
            if(!sendSMS(mobile)){//号码格式验证成功即返回true
                return;
            };

            var obj = $(this).attr('disabled', true);
            var count = null, i = 60;
            obj.text(i + '秒后可重发');
            
            count = setInterval(function(){
                i--;
                if (i <= 0) {
                    obj.removeAttr('disabled').text('重发验证码');
                    clearInterval(count)
                } else {
                    obj.text(i + '秒后可重发');
                }
            }, 1000)
        });

        $('#img1').on('change', '.img-box-line:last-child input[type=file]', function(){
           
        });

        var bind_name = 'input';
        if (navigator.userAgent.indexOf("MSIE") != -1) {
            bind_name = 'propertychange';
        }
        
<%--        $('.count').bind(bind_name, function() {--%>
<%--            checkWords(this, $(this).attr('data-length'));--%>
<%--        })--%>
<%--        $('.count').blur(function() {--%>
<%--            if ($(this).val().length > $(this).attr('data-length')) {--%>
<%--                $(this).val($(this).val().substr(0, $(this).attr('data-length')));--%>
<%--            }--%>
<%--        });--%>
        
    })();


<%--	function checkWords(obj, n) {--%>
<%--        n = parseInt(n);--%>
<%--        var c = 0;--%>
<%--        if ($(obj).val().length > n) {--%>
<%--            c = 0;--%>
<%--        } else {--%>
<%--            c = n - $(obj).val().length;--%>
<%--        }--%>
<%--        $(obj).siblings('.count').text(c);--%>
<%--    }--%>
	function checkWords (obj, n) {
		n = parseInt(n);
        var c = 0;
        if ($(obj).val().length > n) {
            c = n-$(obj).val().length;
             $(obj).siblings('.count').css("color","red");
        } else {
            c = n - $(obj).val().length;
             $(obj).siblings('.count').css("color","#988e89"); 
        }
       $(obj).siblings('.count').text(c);
        
        //
        //$(obj).val($(obj).val().substr(0,n));
        
    }
    function submitAuthInfoEx(){
        var originalPhoneNum = '${member.mobile}';
    	var realName = $("#realName").val();
    	var idNumber = $("#idNumber").val();
    	var mobile = $("#mobile").val();
    	var bankCard = $("#bankCard").val();
    	var bankName = $("#bankName").find("option:selected").text();
    	var subBranch = $("#subBranch").val();
    	var school = $("#school").val();
    	var description = $("#description").val();
    	var identifyimg = $("#identifyimg").val();
    	var identifyimgre = $("#identifyimgre").val();

    	if(!isIdNumVailded){
    		alert("请先核对您的身份证号是否填写有误！");
    		return;
        }

    	if(!isBankNumberVailded){
    		alert("请先核对您的银行账号是否填写有误！");
    		return;
        }
        //简介不能为空
    	if(description.replace(/(^\s*)|(\s*$)/g, "").length ==0){
    		alert("请填写您的个人简介！");
    		return;
        }

        //修改手机号
        if(changePhoneFlag){
	        checkAuthCode();
	        if(!authCodeStats){
	        	alert("您修改了手机号，请重新验证！");
	    		return;
	        }
        }
        
    	$.ajax({
			url:"/scfire/user/userAuthSubmit",
			type:'POST',
			data:{"realName":realName,
				  "idNumber":idNumber,
				  "identifyimg":identifyimg,
				  "identifyimgre":identifyimgre,
				  "subBranch":subBranch,
				  "mobile":mobile,
				  "bankCard":bankCard,
				  "bankName":bankName,
				  "school":school,
				  "description":description},
			dataType:'text',
			async: false,
			contentType: "application/x-www-form-urlencoded; charset=utf-8",
			success:function(data){
				if(data=="success"){
					//$('.d-warning').addClass('show');
					goStep(4);
					//countLink("/scfire/project/start");	
				}
							
			},
			error: function (data){
				alert("认证信息提交失败.");
			}
		});

		
    }


	function changePhoneNum(){
		changePhoneFlag = (changePhoneFlag == true? false:true);
		var cButton = $("#changePhoneButton");
		var aBox = $("#authCodeBox");
		if(changePhoneFlag){
			aBox.css('display','');
			$("#mobile").removeAttr("disabled");
			cButton.html("取消");
		}
		else{
			aBox.css('display','none');
			$("#mobile").attr("disabled","disabled");
			cButton.html("修改");
		}
	}
	</script>

</body>
</html>